<template>
	<view class="bgw house-filter-price">
		<template v-if="tabs.length>1">
			<u-tabs :list="tabs" :is-scroll="false" v-model="tabsCurrent" @change="tabsChange" :show-bar="false" :offset="[0,70]"></u-tabs>
		</template>
		<template v-if="tabs.length == 1">
			<view class="u-p-l-28 u-p-r-28 u-p-t-28">
				{{tabs[0].name}}	
			</view>
		</template>
		<view class="tag-list u-p-10" v-if="list[tabsCurrent]">
			<u-row gutter="0">
				<template v-for="(v,i) in list[tabsCurrent].children" :key="v.house_tag_id">
					<u-col span="3">
						<view
							:class="[tagActive[house_tag_id_current] && tagActive[house_tag_id_current][v.house_tag_id]?'active':'','tag-item']"
							@click="tagClick(v,list[tabsCurrent])">{{v.house_tag_title}}</view>
					</u-col>
				</template>
			</u-row>
		</view>
		<view class="u-p-28" v-if="list[tabsCurrent] && list[tabsCurrent].search_type == 4">
			<view class="">
				自定义价格
			</view>
			<view class="u-flex">
				<u-field input-align="center" label-width="0" v-model="searchInputValue[filter_name_current][0]"
					placeholder="最低" type="number"></u-field>
				<view class="">
					至
				</view>
				<u-field input-align="center" label-width="0" v-model="searchInputValue[filter_name_current][1]"
					placeholder="最高" type="number"></u-field>
			</view>
		</view>

		<view class="btn-wrap u-flex u-p-10">
			<view class="u-flex-1 u-p-10">
				<u-button type="default" @click="reset" class="btn-block btn-grey">重置</u-button>
			</view>
			<view class="u-flex-1 u-p-10">
				<u-button type="primary" @click="submit" class="btn-block">确定</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import hook from './js/hook.js'; //需要引入store
	import {
		ref,
		reactive,
		computed,
		onMounted,
		getCurrentInstance,
		watch,
	} from 'vue'
	const {
		proxy,
	} = getCurrentInstance()
	const emit = defineEmits(['submit', 'reset'])
	const props = defineProps({
		houseType: {
			type: [String, Number],
			default: '',
		},
		fenliId: {
			type: [String, Number],
			default: '',
		}
	})
	const {
		houseType,
		fenliId,
		list,
		tagActive,
		menuActive,
		searchValue,
		searchInputValue,
		setSubmit,
		setReset,
		tagClick,
		setTagActive,
		setValue
	} = hook();
	houseType.value = props.houseType;
	fenliId.value = props.fenliId;
	
	const tabsCurrent = ref(0);
	const tabs = computed(() => {
		return list.value.map(v => {
			return {
				name: v.house_tag_title,
				id: v.house_tag_id,
				count:menuActive[v.house_tag_id]?1:0
			}
		})
	})
	const house_tag_id_current = computed(() => {
		return list.value[tabsCurrent.value].house_tag_id
	})
	const filter_name_current = computed(() => {
		return list.value[tabsCurrent.value].filter_name
	})
	const tabsChange = () => {
		// console.log('tabsChange');
	}
	const reset = () => {
		let data = setReset();
		emit('reset', data)
	}
	const submit = () => {
		let data = setSubmit();
		emit('submit', data)
	}
	defineExpose({setValue})
</script>

<style lang="scss" scoped>
	::v-deep.house-filter-price{
		::v-deep.u-badge--bg--error{
			color: #2979ff !important;
			transform: scale(0.5) !important;
			background-color: #2979ff;
		}
	}
	
	.btn-wrap {
		box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(231, 235, 238, 0.3);
	}

	.tag-item {
		height: 64rpx;
		background: #F6F6F6;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		line-height: 64upx;
		text-align: center;
		font-size: 24upx;
		margin: 10upx;

		&.active {
			background: #E2F2FF;
			color: #249CFF;
		}
	}
</style>